<template>
<!-- direction="vertical" 设置元素的垂直方向布局 -->
  <el-container direction="vertical" style scoped>
    <el-row>
      <p style="font-size:30px;text-align:center;font-family:Serif">我的订单</p>
    </el-row>
    <!-- 订单表格 -->
    <el-row>
      <el-table :data="arr">
      <!-- (1)订单编号 -->
    <el-table-column prop="ordernum" label="订单编号" align="center"></el-table-column>
    
    <!-- (2)商品列表 -->
    <el-table-column label="商品" align="center" width="1050">
      <template slot-scope="scope">
      <!-- template 标签来定义一个作用域插槽，并且 scope 对象包含了当前行的数据和索引。 prop数据绑定-->
       <!-- 第一层插槽：渲染表格的列 -->
        <el-table :data="scope.row.goods" style="width: 100%"> 
          <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="img" label="图片" align="center">
       <!-- 第二层插槽：嵌套表格的定制渲染 -->
       <!-- 这里使用了嵌套的插槽，用于渲染商品图片。subScope 对象包含了当前行的数据和索引。 -->
            <template slot-scope="subScope"> 
              <img :src="'http://127.0.0.1:3001/images/' + subScope.row.img" alt="" style="width: 50px; height: 50px" />
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价" align="center"></el-table-column>
          <el-table-column prop="num" label="数量" align="center"></el-table-column>
          <el-table-column label="金额" align="center">
            <template slot-scope="subScope">
              {{ subScope.row.num * subScope.row.price }}元
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-table-column>

    <!-- (3)发货状态 -->
    <el-table-column prop="sendoutGoods" label="发货状态" align="center"></el-table-column>

    <!-- (4)收货状态 -->
    <el-table-column label="确认收货" align="center">
      <template slot-scope="scope">
        <button v-if="scope.row.ReceivingStatus === '未收货'" disabled>商品还未发货</button>
        <button v-else-if="scope.row.ReceivingStatus === '点击收货'" @click="handleConfirmDelivery(scope.row)">确认收货</button>
        <span v-else-if="scope.row.ReceivingStatus === '收货成功'">{{ scope.row.ReceivingStatus }}</span>
      </template>
    </el-table-column>
      </el-table>
    </el-row>
  </el-container>
</template>

<script>
import pay from "../components/pay.vue"
import { mapState } from "vuex";
export default {
  components: {
    pay
  },
  data(){
    return{
      accountss: [],
      arr:[]
    }
  },

 computed:{
  ...mapState("user", ["user"]),
 },
 created(){ //实例被创建后执行
    if (!this.user) {
    console.error("用户数据尚未加载，无法获取 uid");
    return; // 如果 user 为 null，则提前返回，避免后续代码执行
  }
   let sel={
      uid:this.user.uid,
    };
          this.axios
        .post("/api/accounts/sele", {sel:sel})
        .then((res) => {
          console.log("成功发送请求");
          let data = res.data.data.results4;
          // 合并数据: 将相同订单编号的商品合并到一个数组中
      let groupedOrders = []; // 创建一个空数组用于存储合并后的订单数据
      let orderMap = {}; // 创建一个空对象用于存储订单数据，以避免重复添加相同订单编号的数据
      data.forEach((item) => {
        let ordernum = item.ordernum;//订单编号
        if (!orderMap[ordernum]) {//如果订单编号不存在于orderMap中，则创建一个新的对象来存储该订单的数据。
          // 新创建的对象被添加到orderMap中，以订单编号作为键
          orderMap[ordernum] = { 
            goods: [] ,//创建一个空数组，用于存储该订单的商品信息。
            ordernum: item.ordernum, 
            orderid: item.orderid, 
            pricestatus: item.pricestatus, 
            ordertime: item.ordertime, 
            uid: item.uid,
            sendoutGoods:item.sendoutGoods,
            ReceivingStatus:item.ReceivingStatus,
            paystatus:item.paystatus,
          };
        }
        // 合并商品信息,将每个商品的详细信息添加到对应订单的goods数组末尾。
        orderMap[ordernum].goods.push({
          gid: item.gid,
          name: item.name,
          num: item.num,
          price: item.price,
          img: item.img
        });
      });

      // 转换为数组格式
      groupedOrders = Object.values(orderMap);

      // 将合并后的数据赋给 arr
      this.arr = groupedOrders;
      // 强制确保数据按订单时间降序排列 ，
      // sort方法接受一个比较函数作为参数，用于定义排序规则。a：数组this.arr中的当前元素，b：数组this.arr中的下一个要比较的元素。
    this.arr.sort((a, b) => new Date(b.ordertime) - new Date(a.ordertime)); //sort(对数组中的元素进行排序)、new Date()构造函数,将日期字符串转换为日期对象.能够与数字进行比较
     //返回正数，b比a晚，排序在前。反之...
          console.log(JSON.stringify(this.arr));

        })
        .catch((error) => {
          console.log("发送请求失败：", error);
        });
 },
 methods: {
      handleConfirmDelivery(row) {
      if (row.ReceivingStatus === '点击收货') {
        alert('确认收货成功！')
      this.axios //确认收货
      .post("/api/accounts/ReceivingStatus", {orderid:row.orderid})
      .then((response) => {
        this.$router.push("/one");
        console.log(response);
      })
      .catch((error) => {
        console.log("发送请求失败：", error);
      });
      }
    }

}
}
</script>

<style>
table {
  border: 1px solid #e9e9e9;
  border-collapse: collapse; /* 合并边框，去除单元格之间的空隙。 */
  border-spacing: 0; 
}
th,
td {
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  width: 255px;
  text-align: center;
}
td {
  height: 80px;
}
th {
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
}
</style>